<template>
	<view>
		<Header title=" " :showBack="true"></Header>
		<view class="container">
			<view class="time">
				<view>
					<picker style="width: 100%;height: 100%;text-align: center;" mode="date" :value="startTime" @change="bindTimeChange($event,1)">
						<view class="uni-input">{{startTime}}</view>
					</picker>
				</view>
				至
				<view>
					<picker style="width: 100%;height: 100%;text-align: center;" mode="date" :value="endTime" @change="bindTimeChange($event,2)">
						<view class="uni-input">{{endTime}}</view>
					</picker>
				</view>
			</view>
			
			<view class="allNum">
				<view>
					<view>代扣支付金额</view>
					<view>{{allInfo.offlineFaceAmount}}</view>
				</view>
				<view>
					<view>余额支付金额</view>
					<view>{{allInfo.amountPayAmount}}</view>
				</view>
				<view>
					<view>总金额</view>
					<view>{{allInfo.amount}}</view>
				</view>
				<view>
					<view>总笔数</view>
					<view>{{allInfo.count}}</view>
				</view>
			</view>
			
			<view class="box" v-if="list.length>0">
				<view>
					<view>学生姓名</view>
					<view>总金额</view>
					<view>代扣金额</view>
					<view>余额金额</view>
					<view>笔数</view>
				</view>
				
				<view v-for="(item,index) in list" :key="index" :style="{'background-color': index%2==0?'':'#eeeeee'}">
					<view>{{item.ownerName}}</view>
					<view>{{item.amount}}</view>
					<view>{{item.offlineFaceAmount}}</view>
					<view>{{item.amountPayAmount}}</view>
					<view>{{item.count}}</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime: '',
				endTime: '',
				allInfo:{},
				list:[]
			}
		},
		onLoad() {
			this.setTime()
			this.getList()
		},
		methods: {
			getList(){
				this.$http('/member/api/memberCard/statisticsClassOrderList',{
					"pageSize":999,
					    "pageNum":1,
					    "condition":{
					        "trTimeStart":this.startTime,
					        "trTimeEnd":this.endTime,
							"memberCardId":uni.getStorageSync('info').id,
					    }
				},async res=>{
					this.allInfo = res.data.summary
					this.list = res.data.items
					for (let item of this.list) {
					  item.ownerName = await this.decryptPhone(item.ownerName); 
					}
				})
			},
			decryptPhone(value) {
				if (value === null || value === undefined || value.trim() === '') {
				  return Promise.resolve('');
				}
				return new Promise((resolve,reject)=>{
					// if (value.length > 20 && /[0-9]/.test(value) && /[a-zA-Z]/.test(value)) {
					// if (/[0-9]/.test(value) && /[a-zA-Z]/.test(value)) {
						this.$http('/kernel/api/privacy/decryptPhone',{"CipherTexts":[value] }, res=>{
							if(res.data.data.length>0){
									resolve(res.data.data[0].phone) 
								}else{
									resolve(value)
								}
						})
					// }else{
						// resolve(value)
					// }
				})
			},
			bindTimeChange(e, x) {
				if (x == 1) {
					this.startTime = e.detail.value
				} else if (x == 2) {
					this.endTime = e.detail.value
				}
				this.list = []
				this.page = 1
				this.getList()
			},
			setTime() {
				let date = new Date();
				date.setDate(1);
				this.startTime = date.toISOString().split('T')[0];
			
				let date2 = new Date();
				let currentMonth = date2.getMonth();
				let nextMonth = ++currentMonth;
				let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
				// let oneDay=1000*60*60*24;
				this.endTime = new Date(nextMonthFirstDay).toISOString().split('T')[0]
			},
		}
	}
</script>

<style scoped lang="less">
.time {
			width: 100%;
			height: 100upx;
			display: flex;
			background-color: #FFF;
			justify-content: space-around;
			align-items: center;
			border-radius: 16upx;
			box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
			>view {
				width: 40%;
				height: 68%;
				line-height: 66upx;
				border-radius: 10upx;
				background: #f2f2f2;
			}
		}
	.allNum{
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 45upx 0 0;
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		display: grid;
		grid-template-columns: repeat(2,1fr);
		margin: 25upx auto 0;
		>view{
			text-align: center;
			margin-bottom: 45upx;
			>view:first-child{
				font-size: 22upx;
				color: #999999;
			}
			>view:last-child{
				font-size: 26upx;
				font-weight: 600;
				margin-top: 25upx;
			}
		}
	}
	.box{
		font-size: 24upx;
		background-color: #FFF;
		border-radius: 10upx;
		margin: 28upx auto;
		border: 1upx solid #ddd;
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		>view{
			display: flex;
			height: 100upx;
			>view{
				width: 20%;
				height: 100%;
				border-bottom: 1upx solid #ddd;
				border-right: 1upx solid #ddd;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			
		}
		>view:first-child{
			height: 60upx;
			background-color: #ccc;
		}
	}
</style>
